<template>
        <div class="content">
            <div class="content-box">
                 <basicsCard :data="basicsdata"></basicsCard>
                 <labelname :title="'执行汇总'"></labelname>
                    <el-card :body-style="{ padding: '1.6rem',}"  shadow="never" >
                     <div class="execute-box">
                         <div class="execute-name">
                            参与客户数：{{collectdata.customerSum}}家
                         </div>
                          <div class="execute-name">
                            品种数：{{collectdata.varietiesSum}}
                         </div>
                         <div class="execute-name">
                            累计销售额：：{{collectdata.cumulativeSales}}元
                         </div>
                   </div>
                  </el-card>
                   <labelname :title="'上量趋势'"></labelname>
                  <div class="upnum">  <scEcharts :height="'30rem'" width='100%' :option="echartsUpnum"></scEcharts ></div>
                  <labelname :title="'终端覆盖趋势'"></labelname>
                  <chartCard :echartsData="echartsTerminal" height="30rem"></chartCard>
                    <labelname :title="'商业客户'"></labelname>
                    <businessTable :pageNum="form.pageNum" :logdingB="logding" :pageSize="form.pageSize" :tableData="detailist" @getdata="getlistdata"></businessTable>
            </div>
        </div>
</template>

<script>
import basicsCard from '../components/basicsCard.vue'
import labelname from '../components/labelname.vue'
import chartCard from '../components/chartcard.vue'
import businessTable from '../components/businessTable.vue'
import scEcharts from '@/components/scEcharts'

import * as echarts from "echarts"
export default {
    data(){
        return{
          form:{
           pageSize:10,
           pageNum:0,
          },
          logding:false,
          basicsdata:{
          },
           detailist:[],
          collectdata:{},
          echartsUpnum:{
                color: ["#899BFD", "#D770ED", "#67DAA8", "#8CA3FF"],
                   tooltip: {
                trigger: "axis",
                 axisPointer: {
                     type: "shadow"
                  },
            formatter: (data) => {
              console.log('parma', data)
              let str = '<div style="color:#0C1B52;font-size: 15px;font-weight: bold;margin-bottom: 5px;">' + data[0].axisValue + '</br></div>'
              data.reverse().forEach(item => {
                str = str + '</br><span style="margin-right:20px">' + '金额</span>' + '' + '<span> ' + item.data + '</br></span>'
              })
              return str
               }
             },
    legend: {
          show:false
        // top:'-20px'
    },
   grid: {
     top:'16%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
       xAxis: {
      
splitLine:{
   show:false
},
    type: 'category',
    boundaryGap: false,
    data: ["1/1", "1/5", "1/10", "1/15",'1/20','1/25','1/30'],
  },
     yAxis: {
         },
  series: [     {
      type: 'line',
      stack: 'Total',
      avoidLabelOverlap:false,
      smooth: true,
        areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#E8EBFA'
          },
          {
            offset: 1,
            color: '#FEFEFF'
          }
        ])
      },
      showSymbol: false,
      emphasis: {
        focus: 'series'
      },
      data:[]
    },
                    ]
        },
        echartsTerminal:{
                color: ["#FCA169", "#D770ED", "#67DAA8", "#8CA3FF"],
                   tooltip: {
                trigger: "axis",
                 axisPointer: {
                     type: "shadow"
                  },
            formatter: (data) => {
              console.log('parma', data)
              let str = '<div style="color:#0C1B52;font-size: 15px;font-weight: bold;margin-bottom: 5px;">' + data[0].axisValue + '</br></div>'
              data.reverse().forEach(item => {
                str = str + '<div style="font-size: 12px;padding: 4px 0">' + '<div style="display:inline-block;margin-right:4px;width:12px;height:4px;background-color:' + item.color + ';"></div>' + item.seriesName + ' : ' + item.data + '</br></div>'
              })
              return str
               }
             },
    legend: {
        data: [ {
              name: '购买5盒以上家数',
              icon: 'rect',
            },
            {
              name: '购买10盒以上家数',
              icon: 'rect',
            }, ],
        left: '20',
        top:20,
        itemWidth:16,
        itemHeight:8,
        textStyle:{
            fontSize:'1rem'
        }
        // top:'-20px'
    },
   grid: {
     top:'16%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
       xAxis: {
      
splitLine:{
   show:false
},
boundaryGap: false,
    type: 'category',
    data: ["1月", "2月", "3月", "4月",'5月','6月','7月','8月','9月','10月','11月','12月'],
  },
     yAxis: {
         },
  series: [ {
                                     name: '购买5盒以上家数',
                                   type: "line",
                                   seriesLayoutBy: "row",
                                   label:{
                                   show:false,
                                     },
                                  avoidLabelOverlap:false,
                                  labelLine: {
                                   show: false
                                      },
                                  symbol:'none',
                                  smooth: true,
                                  data: [1,2,3,4,5,6,7,8,9,4,2,1],
                                  },
                                  {
                                     name: '购买10盒以上家数',
                                   type: "line",
                                   seriesLayoutBy: "row",
                                   label:{
                                   show:false,
                                     },
                                  avoidLabelOverlap:false,
                                  labelLine: {
                                   show: false
                                      },
                                  symbol:'none',
                                  smooth: true,
                                  data: [15,12,45,15,21,52,12,15,15,15,8,21],
                                  }]
        },
        }
    },
components:{
   basicsCard,
   labelname,
   chartCard,
   scEcharts,
   businessTable
},
created(){
this.getData()
this.getlistdata()
},
methods:{
      fontSize(res){
	const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
	if (!clientWidth) return;
	let fontSize = clientWidth / 1920;
	return res*fontSize;
     	},
     async  getData(){
        let data =   await this.$API.ActivityMonitoringM.ActivitySup.info.post({id:0})
        console.log(data)
        if(data.code =='0'){
            this.basicsdata = data.data.execBasicModel
            this.collectdata = data.data.activityIndexModel
             this.echartsUpnum.xAxis.data  =  data.data.upwardTrendModels.statisticalDate
              this.echartsUpnum.series[0].data  =  data.data.upwardTrendModels.amount
              this.echartsTerminal.series[0].data = data.data.terminalCoverageTrendModels.moreThanFive
               this.echartsTerminal.series[1].data = data.data.terminalCoverageTrendModels.moreThanTen
        }
       },
            async getlistdata(){
             this.logding =true
             this.form.pageNum++
             this.form = {...this.form}
             console.log(this.form)
             
            let res  =  await this.$API.ActivityMonitoringM.ActivitySup.businessList.post(this.form)
            console.log(res)
            if(res.code=='0'){
                 this.pageNum = res.pageNum
                this.logding = false
                this.detailist = [...this.detailist,...res.data]
            }
        },
}
}
</script>

<style scoped>
.content{
   width: 100%;
   height: 100vh;
   /* padding */
   background-color: #F7F7F7;
}
.content-box{
   /* width: calc(100vw); */
   /* height: calc(100vh - 132rem); */
   padding: 1.5rem 1.6rem 0;
   margin: 0;
    background-color: #F7F7F7;
   /* background: ; */
}
.execute-box{
    width: 100%;
    height: 10rem;
    display: flex;
        flex-direction: column;
    justify-content: space-between;
}
.execute-name{
    font-size: 1.3rem;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color:var(--el-color-text-6);
}
.upnum{
  padding:0 1rem;
}

</style>